<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="tan">
        <div class="nav">
            <div>菜名</div>
            <div>菜品类别</div>
            <div>库存</div>
            <div>盘点时间</div>
            <div>操作</div>


        </div>
        <div class="list gai">
            <div>菜名</div>
            <div>菜品类别</div>
            <div>库存</div>
            <div>盘点时间</div>
            <div>确定</div>
            <div>取消</div>
        </div>
    </div>
    <div class="sort">
        <select name="" id="sele">
            <option value="全部">全部 </option>
            <option value="苏菜">苏菜 </option>
            <option value="粤菜">粤菜</option>
            <option value="鲁菜"> 鲁菜</option>
            <option value="川菜">川菜 </option>
            <option value="湘菜">湘菜 </option>
            <option value="闽菜"> 闽菜</option>
            <option value="浙菜"> 浙菜</option>
            <option value="徽菜">徽菜 </option>
        </select>
        <input type="text" id="sort"> <span class="fun"> 点击搜索</span>

    </div>
    <div class="nav">
        <div>菜名</div>
        <div>菜品类别</div>
        <div>库存</div>
        <div>盘点时间</div>
        <div>删除</div>
        <div>修改</div>


    </div>
    <div class="box">
        <div class="list">
            <div>菜名</div>
            <div>菜品类别</div>
            <div>库存</div>
            <div>盘点时间</div>
            <div>删除</div>
            <div>修改</div>
        </div>

    </div>
</body>

</html>
<script src="../../commonPort/jsonP.js"></script>
<script>

    function $(e) { return document.querySelector(e) }
    srp({
        url: "http://localhost:8080/check",
        text: {
            callback: "fun"
        }
    })
    function fun(arr) {
        console.log( arr);
        arr = [...arr]
        console.log(arr);
        let str = ``
        arr.forEach(item => {
            item.list.forEach(key => {
                if (key["id"]) {
                    str += `   <div class="list" id=${key["id"]}>
            <div>${key["name"]}</div>
            <div>${key["class"]}</div>
            <div>${key["num"]}</div>
            <div>${key["day"]}</div>
            <div>删除</div>
            <div>修改</div>
            </div>`
                }
            })
        });
        $(".box").innerHTML = str
        $(".box").addEventListener("click", e => {

            console.log(e.target.innerHTML);
            switch (e.target.innerHTML) {

                case "删除":
                    srp({
                        url: "http://localhost:8080/remove",
                        text: {
                            callback: "fun",
                            id: e.target.parentNode.id
                        }
                    })

                        ; break
                case "修改":
                    let str = e.target.parentNode.id
                    let brr = str.split("-")
                    let [i, j] = brr
                    i *= 1
                    j *= 1
                    // console.log();
                    $(".tan").style.display = "block"
                    let myobj = arr[i]
                    let tetxs = myobj["list"]
                    console.log(tetxs[j]);
                    $(".gai").innerHTML = `     
        <input type="text" value="${tetxs[j]["name"]}" id="name">
        <input type="text" value="${tetxs[j]["class"]}"  id="clas">
        <input type="text" value="${tetxs[j]["num"]}"  id="num">
        <input type="text" value="${tetxs[j]["day"]}"  id="day">
            <div>取消</div>
            <div id = ${tetxs[j]["id"]}>修改</div>`
                    $(".gai").addEventListener("click", e => {
                        if (e.target.innerHTML === "修改") {
                            $(".tan").style.display = "none"
                            srp({
                                url: "http://localhost:8080/amend",
                                text: {
                                    callback: "fun",
                                    is: e.target.id,
                                    name: $("#name").value,
                                    cs: $("#clas").value,
                                    num: $("#num").value,
                                    day: $("#day").value,
                                }
                            })

                        } else if (e.target.innerHTML === "取消") {
                            $(".tan").style.display = "none"
                        }
                    })
                        ; break
            }
        })
        $(".fun").onclick = e => {
            srp({
                url: "http://localhost:8080/sort",
                text: {
                    callback: "Tmd",
                    typehade: $("#sele").value,
                    typeend: $("#sort").value,
                    att: "0",
                }
            })
            // obj.post({
            //     url: "/sort",

            //     text: {
            //         typehade: $("#sele").value,
            //         typeend: $("#sort").value,

            //     },
            //     hed: {

            //     },
         
            // })
        }

    }
    function Tmd(arr) {
                    // let arr = JSON.parse(data)
                    $(".box").innerHTML = ``
                    let str = ``
                    arr.forEach(key => {
                        if (key["id"]) {
                            str += `   <div class="list" id=${key["id"]}>
                    <div>${key["name"]}</div>
                    <div>${key["class"]}</div>
                    <div>${key["num"]}</div>
                    <div>${key["day"]}</div>
                    <div>删除</div>
                    <div>修改</div>
                    </div>`
                        }
                    });
                    if (arr.length === 0) {
                        str += `<div class="list" >没有找到您想吃的菜！！换个口味试试·····</div>`
                    }
                    $(".box").innerHTML = str


                }

</script>